<template>
    <div class="p-2">
      <div class="payment-top">
        <span>{{ route.query.projectName }}{{ route.query.houseNumber }}号缴费记录</span>
        <el-button @click="goBack()" size="small">返 回</el-button>
      </div>
      <el-card shadow="never" class="card-position">
        <div class="card_top-tow" style="margin-bottom: unset;">
          <span class="card_title">房屋物业费</span>
        </div>
        <!-- <span class="card-position_name">房屋物业费缴费记录</span> -->
        <el-table ref="houseCostListRef" v-loading="loading" :data="houseCostList" height="20vh">
            <el-table-column label="小区名称" align="center" prop="projectName" />
            <el-table-column label="房屋号" align="center" prop="houseNumber" />
            <el-table-column label="房屋类别" align="center" prop="houseCategory">
              <template #default="scope">
                  <dict-tag :options="house_category" :value="scope.row.houseCategory" />
              </template>
            </el-table-column>
            <el-table-column label="房屋面积" align="center" prop="houseArea" />
            <el-table-column label="物业费" align="center" prop="houseManagementCost" />
            <el-table-column label="装修垃圾清运费" align="center" prop="houseWasteCose" />
            <el-table-column label="缴费日期" align="center" prop="housePayDate" width="180">
              <template #default="scope">
                  <span>{{ parseTime(scope.row.housePayDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否开具发票" align="center" prop="houseCategory">
              <template #default="scope">
                  <dict-tag :options="is_need_invoice" :value="scope.row.isNeedInvoice" />
              </template>
            </el-table-column>
            <el-table-column label="物业费周期" align="center" prop="garageManagementStartDate" width="300">
            <template #default="scope">
                <span>{{ parseTime(scope.row.houseManagementStartDate, '{y}-{m}-{d}') }}</span>
                <span style="margin:0 10px;">至</span>
                <span>{{ parseTime(scope.row.houseManagementEndDate, '{y}-{m}-{d}') }}</span>
            </template>
            </el-table-column>
        </el-table>
      </el-card>
      <el-card shadow="never" class="card-position">
        <div class="card_top-tow" style="margin-bottom: unset;">
          <span class="card_title">车库物业费</span>
        </div>
        <el-table ref="ckCostListRef" v-loading="costLoading" :data="ckCostList" height="20vh">
            <el-table-column label="小区名称" align="center" prop="projectName" />
            <el-table-column label="房屋号" align="center" prop="houseNumber" />
            <el-table-column label="车库号" align="center" prop="bicycleNumber" />
            <el-table-column label="车库面积" align="center" prop="bicycleArea" />
            <el-table-column label="车库物业费" align="center" prop="bicycleManagementCost" />
            <el-table-column label="是否开具发票" align="center" prop="houseCategory">
              <template #default="scope">
                  <dict-tag :options="is_need_invoice" :value="scope.row.isNeedInvoice" />
              </template>
            </el-table-column>
            <el-table-column label="车库物业费周期" align="center" prop="bicycleManagementStartDate" width="300">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.bicycleManagementStartDate, '{y}-{m}-{d}') }}</span>
                    <span style="margin:0 10px;">至</span>
                    <span>{{ parseTime(scope.row.bicycleManagementEndDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
        </el-table>
      </el-card>
      <el-card shadow="never" class="card-position">
        <div class="card_top-tow" style="margin-bottom: unset;">
          <span class="card_title">车位管理费</span>
        </div>
        <el-table ref="cwCostListRef" v-loading="cwLoading" :data="cwCostList" height="20vh">
            <el-table-column label="小区名称" align="center" prop="projectName" />
            <el-table-column label="房屋号" align="center" prop="houseNumber" />
            <el-table-column label="车位号" align="center" prop="garageNumber" />
            <el-table-column label="车位管理费" align="center" prop="garageManagementCost" />
            <el-table-column label="车牌号" align="center" prop="garageCarNumber" />
            <el-table-column label="是否开具发票" align="center" prop="houseCategory">
              <template #default="scope">
                  <dict-tag :options="is_need_invoice" :value="scope.row.isNeedInvoice" />
              </template>
            </el-table-column>
            <el-table-column label="车位管理费周期" align="center" prop="garageManagementStartDate" width="300">
            <template #default="scope">
                <span>{{ parseTime(scope.row.garageManagementStartDate, '{y}-{m}-{d}') }}</span>
                <span style="margin:0 10px;">至</span>
                <span>{{ parseTime(scope.row.garageManagementEndDate, '{y}-{m}-{d}') }}</span>
            </template>
            </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script setup name="HouseInfo" lang="ts">
  import { listHouseCost } from '@/api/business/houseCost';
  import { listBicycleCost } from '@/api/business/garageCost';
  import { listCost } from '@/api/business/parkingLotCost';
  import { HouseInfoVO, HouseInfoQuery, HouseInfoForm } from '@/api/business/houseInfo/types';

  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const { house_category ,is_need_invoice } = toRefs<any>(proxy?.useDict('house_category','is_need_invoice'));
  const route = useRoute();
  const router = useRouter();

  const loading = ref(true);
  const houseCostList = ref();
  const houseCostTotal = ref(0);
  const houseCostListRef = ref<ElFormInstance>();

  const costLoading = ref(true);
  const ckCostList = ref();
  const ckCostTotal = ref(0);
  const ckCostListRef = ref<ElFormInstance>();

  const cwLoading = ref(true);
  const cwCostList = ref();
  const cwCostTotal = ref(0);
  const cwCostListRef = ref<ElFormInstance>();
  
  const initFormData: HouseInfoForm = {
    houseId: undefined,
    projectId: undefined,
    houseNumber: undefined,
    houseCategory: undefined,
    houseArea: undefined,
    houseReceiveDate: undefined,
    houseDecorationDate: undefined,
    houseLiveInSituation: undefined,
    remark: undefined,
  }
  const data = reactive({
    form: {...initFormData},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      projectId: undefined,
      houseId: undefined
    },
    ckQueryParams: {
      pageNum: 1,
      pageSize: 10,
      projectId: undefined,
      houseId: undefined
    },
    cwQueryParams: {
      pageNum: 1,
      pageSize: 10,
      projectId: undefined,
      houseId: undefined
    },
    rules: {
      houseId: [
        { required: true, message: "房屋id不能为空", trigger: "blur" }
      ],
      projectId: [
        { required: true, message: "小区名称不能为空", trigger: "blur" }
      ],
      houseNumber: [
        { required: true, message: "房屋号不能为空", trigger: "blur" }
      ],
      houseCategory: [
        { required: true, message: "房屋类别不能为空", trigger: "blur" }
      ],
      houseArea: [
        { required: true, message: "房屋实测面积不能为空", trigger: "blur" }
      ],
    }
  });
  
  const { queryParams, ckQueryParams, cwQueryParams, form, rules } = toRefs(data);

  /** 查询房屋费用列表 */
const getHousCostList = async (projectId:any,houseId:any) => {
    loading.value = true;
    queryParams.value.projectId = projectId
    queryParams.value.houseId = houseId
    const res = await listHouseCost(queryParams.value);
    houseCostList.value = res.rows;
    houseCostTotal.value = res.total;
    loading.value = false;
}

/** 查询车库费用列表 */
const getCKCostList = async (projectId:any,houseId:any) => {
    costLoading.value = true;
    ckQueryParams.value.projectId = projectId
    ckQueryParams.value.houseId = houseId
    const res = await listBicycleCost(ckQueryParams.value);
    ckCostList.value = res.rows;
    ckCostTotal.value = res.total;
    costLoading.value = false;
}

/** 查询车位费用列表 */
const getCWList = async (projectId:any,houseId:any) => {
    cwLoading.value = true;
    cwQueryParams.value.projectId = projectId
    cwQueryParams.value.houseId = houseId
    const res = await listCost(cwQueryParams.value);
    cwCostList.value = res.rows;
    cwCostTotal.value = res.total;
    cwLoading.value = false;
}

const handleScroll = (event) => {
  const tableBody = event.target;
  if (((tableBody.scrollHeight - tableBody.scrollTop)|0) <= tableBody.clientHeight && houseCostList.value.length < houseCostTotal.value) {
    loadMore('1');
  }
}
const ckCostHandleScroll = (event) => {
  const tableBody = event.target;
  if (((tableBody.scrollHeight - tableBody.scrollTop)|0) <= tableBody.clientHeight && ckCostList.value.length < ckCostTotal.value) {
    loadMore('2');
  }
}
const cwCostHandleScroll = (event) => {
  const tableBody = event.target;
  if (((tableBody.scrollHeight - tableBody.scrollTop)|0) <= tableBody.clientHeight && cwCostList.value.length < cwCostTotal.value) {
    loadMore('3');
  }
}

const loadMore = async (type:any) => {
//   if (loading.value) return;
  setTimeout(() => {
    if (type=='1') {
      loading.value = true
      queryParams.value.pageNum++
      listHouseCost(queryParams.value).then((res) => {
            houseCostList.value = houseCostList.value.concat(res.rows);
            loading.value = false
      })    
    }else if(type=='2') {
        costLoading.value = true
        ckQueryParams.value.pageNum++
        listBicycleCost(ckQueryParams.value).then((res) => {
            ckCostList.value = ckCostList.value.concat(res.rows);
            costLoading.value = false
        })
    }else{
        cwLoading.value = true
        cwQueryParams.value.pageNum++
        listCost(cwQueryParams.value).then((res) => {
            cwCostList.value = cwCostList.value.concat(res.rows);
            cwLoading.value = false
        })
    }
  }, 1000);
};

/** 返回 */
const goBack = () =>{
  const obj = { path: "/projectManagement/houseInfo" };
  proxy?.$tab.closeOpenPage(obj);
}
  
  onMounted( async () => {
    await getHousCostList(route.query.projectId,route.query.houseId)
    await getCKCostList(route.query.projectId,route.query.houseId)
    await getCWList(route.query.projectId,route.query.houseId)
    await nextTick(); // 确保表格渲染完毕
    const tableBodyWrapper = houseCostListRef.value?.$el.querySelector('.el-scrollbar__wrap');
    if (tableBodyWrapper) {
        tableBodyWrapper.addEventListener('scroll', handleScroll);
    }
    const tableBodyCkWrapper = ckCostListRef.value?.$el.querySelector('.el-scrollbar__wrap');
    if (tableBodyCkWrapper) {
        tableBodyCkWrapper.addEventListener('scroll', ckCostHandleScroll);
    }
    const tableBodyCwWrapper = cwCostListRef.value?.$el.querySelector('.el-scrollbar__wrap');
    if (tableBodyCwWrapper) {
        tableBodyCwWrapper.addEventListener('scroll', cwCostHandleScroll);
    }
  });
  </script>

<style>
.hoseSearch .el-form--inline .el-form-item{
    align-items: center;
}
.hoseAddInfo .el-form-item--default{
    align-items: center;
}
</style>
  